<template>
  <div class="error-container">
    <div class="error-content">
      <!-- 错误代码区域 -->
      <div class="error-code">
        <span class="num">4</span>
        <span class="num zero">0</span>
        <span class="num">4</span>
      </div>

      <!-- 错误信息区域 -->
      <div class="error-message">
        <h2>页面未找到</h2>
        <p>抱歉，您访问的页面不存在！</p>
      </div>

      <!-- 导航按钮区域 -->
      <div class="error-actions">
        <el-button type="primary" @click="goHome">返回首页</el-button>
        <el-button @click="goBack">返回上一页</el-button>
      </div>

      <!-- 装饰元素 -->
      <div class="error-decorations">
        <div class="book book-1"></div>
        <div class="book book-2"></div>
        <div class="book book-3"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NotFound',
  setup() {
    const goHome = () => {
      // 根据用户角色返回相应的首页
      const userInfoStr = localStorage.getItem('userInfo')
      const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
      const isAdmin = userInfo?.role?.includes('admin')
      window.location.href = isAdmin ? '/admin/dashboard' : '/user/recommend'
    }

    const goBack = () => {
      if (window.history.length > 1) {
        window.history.back()
      } else {
        goHome()
      }
    }

    return {
      goHome,
      goBack
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.error-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
  padding: 20px;
}

/* 内容区域 */
.error-content {
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 600px;
  width: 100%;
}

/* 错误代码样式 */
.error-code {
  font-size: 120px;
  font-weight: 900;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 180px;
}

.num {
  display: inline-block;
  color: #333;
  position: relative;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

/* 中间的0添加特殊效果 */
.zero {
  color: #e74c3c;
  position: relative;
  z-index: 1;
  animation: pulse 2s infinite ease-in-out;
}

.zero::before {
  content: '📚';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  z-index: -1;
  opacity: 0.8;
}

/* 错误信息样式 */
.error-message h2 {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 15px;
  font-weight: 600;
}

.error-message p {
  font-size: 18px;
  color: #7f8c8d;
  margin-bottom: 40px;
}

/* 操作按钮样式 */
.error-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* 装饰性书籍元素 */
.error-decorations {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.book {
  position: absolute;
  width: 60px;
  height: 80px;
  border-radius: 3px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  animation: float 8s infinite ease-in-out;
}

.book-1 {
  background: #3498db;
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.book-2 {
  background: #e74c3c;
  top: 70%;
  right: 15%;
  animation-delay: 2s;
}

.book-3 {
  background: #2ecc71;
  bottom: 10%;
  left: 30%;
  animation-delay: 4s;
}

/* 书籍装饰细节 */
.book::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 15%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}

/* 动画效果 */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(15px, -15px) rotate(5deg);
  }
  50% {
    transform: translate(0, 30px) rotate(0deg);
  }
  75% {
    transform: translate(-15px, -15px) rotate(-5deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-code {
    font-size: 90px;
    height: 140px;
  }

  .error-message h2 {
    font-size: 24px;
  }

  .error-message p {
    font-size: 16px;
  }

  .error-actions {
    flex-direction: column;
    align-items: center;
  }

  .book {
    width: 40px;
    height: 55px;
  }
}

@media (max-width: 480px) {
  .error-code {
    font-size: 70px;
    height: 110px;
  }

  .error-message h2 {
    font-size: 20px;
  }

  .error-message p {
    font-size: 14px;
  }
}
</style>
